<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游客</title>
</head>
<body>
<style>
body{
    background: #e6e3e3;
}
.xian1{
position: absolute;
left: 13%;
top: 66px;
width: 4px;
height: 33px;
background: #302D2D;
border-radius: 3px;
}
.text1{
position: absolute;
left: 14%;
top: 4%;
width: 122px;
height: 30px;
font-size: 30px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #383730;
}
#tupian0{
    width: 100%;
    height: 55%;
    object-fit: cover;
}

#tupian1{
position: absolute;
left:13% ;
top: 15%;
width: 73%;
height: 52%;
}

.xia{
    width: 73%;
    height: 331px;
    position: absolute;
    left: 13%;
    background: #FFFFFF;
}

#jing{
    width: 205px;
    height: 64px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#but1{
position: absolute;
left: 25%;  
top: 10%;
width: 246px;
height: 70px;
background: #FFFFFF;
border: 2px solid #FFD200;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #282828;
background-image: url(./img/index-img/icon1.png);
background-repeat: no-repeat;
background-position: 30px 15px;
background-size: 35px;
}

#but2{
position: absolute;
left: 50%;  
top: 10%;
width: 246px;
height: 70px;
background: #FFFFFF;
border: 2px solid #FFD200;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #282828;
background-image: url(./img/index-img/icon2.png);
background-repeat: no-repeat;
background-position: 30px 15px;
background-size: 35px;
}

#but3{
position: absolute;
left: 75%;  
top: 10%;
width: 246px;
height: 70px;
background: #FFFFFF;
border: 2px solid #FFD200;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #282828;
background-image: url(./img/index-img/组\ 8.png);
background-repeat: no-repeat;
background-position: 30px 15px;
background-size: 35px;
}
</style>

<div class="shang">
    <div class="xian1"></div>
    <p class="text1">长安计算</p>
    <img src="./img/index-img/bg2.png" id="tupian0">
    <img src="./img/index-img/bg3.png" id="tupian1">
</div>

<div class="xia">
    <img id="jing" src="./img/logo.png">
    <button id="but1">景点推荐</button>
    <button id="but2">门票购买</button>
    <button id="but3">个人信息</button>
</div>
<script>
   let tuijian=document.querySelector('#but1')
   let goumai=document.querySelector('#but2')
   let geren=document.querySelector('#but3')
   tuijian.addEventListener('click',function(){
       window.location.href="tuijian.html"
   })
   goumai.addEventListener('click',function(){
       window.location.href="menpiao.html"
   })
   geren.addEventListener('click',function(){
       window.location.href="grxx.html"
   })
</script>
</body>
</html>